<template>
  <el-dialog v-model="dialogVisible" :append-to-body="true" :before-close="dialogClose" title="">
    <div style="text-align:center;width:100%;">
      <div v-if="flag==='MP4'" id="video">
      </div>
      <audio v-if="flag==='MP3'" ref="audio" controls>
        <source :src="src">
      </audio>
    </div>
  </el-dialog>
</template>
<script setup>
import videoPlayer from "video.js"
import 'video.js/dist/video-js.css'
import {nextTick} from "vue"

const {proxy} = getCurrentInstance();
const dialogVisible = ref(false)
const flag = ref('')
const keyValue = ref(1)
const src = ref('')
const attachmentId = ref('')
const resourceValue = ref('')
// const props = defineProps({
// 	src: {
// 		type: String,
// 		default: ''
// 	}
// })
const openDialog = (flagVal, path, id, resource) => {
  flag.value = flagVal
  src.value = path
  resourceValue.value = resource
  attachmentId.value = id
  dialogVisible.value = true
  keyValue.value++
  nextTick(() => {
    if (flag.value === 'MP4') {
      initVideoSourc(path);
    } else if (flag.value === 'MP3') {
      console.log(111)
      proxy.$refs.audio.load();
    }
  })
}
defineExpose({openDialog})

function dialogClose() {
  if (flag.value === 'MP4') {
    videoPlayer('videoFlag').pause();
    var currentTime = videoPlayer('videoFlag').currentTime();
    var duration = videoPlayer('videoFlag').duration();
    if (duration == currentTime) {
      currentTime = 0;
    }
    videoPlayer('videoFlag').dispose();
  }
  src.value = "";
  attachmentId.value = '';
  resourceValue.value = '';
  dialogVisible.value = false;
}

window.addEventListener('beforeunload', function (event) {
  dialogClose();
})

function initVideoSourc(path) {
  let element = document.getElementById('video'); // 根据容器的id获取元素
  element.innerHTML += '<video id="videoFlag"\n' +
      '               class="video-js"\n' +
      '               controlsList="nodownload"\n' +
      '               style="width: 100%;"\n' +
      '               controls="controls">\n' +
      '        </video>';
  videoPlayer("videoFlag", {
    controls: true, //是否显示控制条
    muted: false, // 是否静音
    preload: 'metadata', //预加载
    autoplay: false, //是否自动播放
    fluid: true, // 自适应宽高
    loop: false, //是否循环播放
    inactivityTimeout: false,
    language: 'zh-CN', // 设置语言
    sources: [
      {
        src: path //你的MP3地址（必填）
      }
    ],
    controlBar: { // 设置控制条组件
      //  设置控制条里面组件的相关属性及显示与否
      'currentTimeDisplay': true,
      'timeDivider': true,
      'durationDisplay': true,
      'remainingTimeDisplay': false,
      volumePanel: {
        inline: false,
      },
      // 使用children的形式可以控制每一个控件的位置，以及显示与否
      children: [
        {
          name: 'playToggle'
        }, // 播放按钮
        {
          name: 'currentTimeDisplay'
        }, // 当前已播放时间
        {
          name: 'progressControl'
        }, // 播放进度条
        {
          name: 'durationDisplay'
        }, // 总时间
        { // 倍数播放
          name: 'playbackRateMenuButton',
          'playbackRates': [0.5, 1, 1.5, 2, 2.5]
        },
        {
          name: 'volumePanel', // 音量控制
          inline: false, // 不使用水平方式
        }, {
          name: 'FullscreenToggle'
        } // 全屏
      ]
    },
    // ...其他配置参数
  }, function () {
    videoPlayer('videoFlag').currentTime();
    this.pause();

  })
}

</script>
<style scoped>
.video-js {
  height: 75vh !important;
}
</style>
